<template>
  <div class="classify"  v-loading="loading">
    <Header></Header>
    <!--          内容页-->
    <div style="background: #f5f5f5;padding-top: 25px">
      <el-row justify="center">
        <el-col :xl="18" :lg="24">
          <div style="width: 100%;height: 100%;display: flex;justify-content: center">
            <span style="user-select: none;color: #a4a4a4">此分类共：{{ articleTotal }}条</span>
            <div style="width: 70%;height: 100%;margin-top: 20px">
              <!--                    每个文章-->
              <el-row justify="center">
                <el-col :span="24" style=";height: 100%;background: #fff;border-radius: 10px">
                  <template v-for="item in ArticleList" :key="item.id">
                    <div style="width: 98%;height: 166px;margin: 25px 10px">
                      <el-card
                          shadow="hover"
                          style="height: 100%;position: relative"
                      >
                        <!--                          标题-->
                        <div @click="toArticleBtn(item.id)" style="cursor: pointer">
                          <span style="font-weight: 900">{{ item.title }}</span>
                        </div>
                        <!--                          简单标签-->
                        <div
                            style="display: flex;
                              color: #c5c5c5;
                              margin-left: 10px;
                              align-items: center;
                              margin-top: 5px;
                              cursor: pointer
">
                            <span style="display: flex;align-items: center">
                              <el-icon style="margin-right: 5px"><avatar/></el-icon>
                              {{ item.sort }}
                            </span>
                          <span style="display: flex;align-items: center;margin-left: 10px">
                              <el-icon style="margin-right: 5px"><position/></el-icon>
                              {{ item.author }}
                            </span>
                        </div>
                        <!--                          简介内容-->
                        <div style="margin-top: 10px">
                          <div>{{ item.content }}</div>
                        </div>
                        <div>
                          <el-button
                              round
                              color="#448aff"
                              style="position: absolute;
                                bottom: 10px;
                                color: white;
                                right: 15px"
                              size="small"
                              @click="toArticleBtn(item.id)"
                          >阅读更多
                          </el-button>
                        </div>
                      </el-card>
                    </div>
                  </template>
                  <!--              分页-->
                  <div style="float: right">
                    <el-pagination background
                                   hide-on-single-page
                                   @current-change="newPagesBtn"
                                   layout="prev, pager, next" :total="articleTotal">
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>

            </div>
          </div>
        </el-col>
<!--        <el-col :span="4" class="hidden-sm-and-down hidden-sm-only hidden-md-only hidden-md-only hidden-lg-only">-->
<!--          <div-->
<!--              style="height: 250px;-->
<!--                    width: 250px;-->
<!--                    border: 1px solid red;-->
<!--                    display: flex;-->
<!--                    justify-content: center;-->
<!--                    align-items: center;-->
<!--                    margin-top: 20px;-->
<!--"-->
<!--          >-->
<!--            个人介绍-->

<!--          </div>-->
<!--        </el-col>-->
      </el-row>
    </div>
  </div>
</template>

<script>

import Classify from "./Classify.js";
import {Avatar, Position} from "@element-plus/icons";

export default {
  name: "Classify",
  components: {
    Avatar,
    Position
  },
  setup() {
    return {
      ...Classify()
    }
  }
}
</script>

<style scoped>
.classify {
  height: 100%;
}
</style>